<!-- 
   eventBus
   
   const bus = new Vue()

   bus.$on('get-name',(msg)=>{
     console.log(msg)
   })

   bus.$emit('get-name', 'this is message')
 -->

<button id="btn">click me</button>

<script>
  document.getElementById('btn').addEventListener('click', () => {
    console.log('事件触发了 回调函数1执行')
  })
  document.getElementById('btn').addEventListener('click', () => {
    console.log('事件触发了 回调函数2执行')
  })

  // 一个事件  click   多个回调    “一对多的关系”  自定义事件（发布订阅模式核心思想） 


  // 事件在浏览器中存储的结构
  // { click: [cb1,cb2]}
  // 用户点击click的时候  找到名称为click的事件  定位到所有回调函数 依次执行

  // 整个事件过程
  // 1. 事件收集 
  // 2. 事件的触发

  // 1. 找一个存放事件的位置  2. 有一个收集事件的方法  3.有一个触发事件的方法
  const emitter = {
    eventMap: {
      // click: [cb1,cb2]
    },
    // 收集事件
    on(eventName, cb) {
      // 如果一次都没有收集过 那就初始化一个 click:[]
      // 如果已经添加过了  push
      if (!this.eventMap[eventName]) {
        this.eventMap[eventName] = []
      }
      this.eventMap[eventName].push(cb)
    },
    // 触发事件
    emit(eventName, payload) {
      // 去eventMap找到想要触发的事件 然后把它对应的所有的回调函数执行一遍
      this.eventMap[eventName].forEach(cb => cb(payload))
    }
  }

  emitter.on('test', (payload) => {
    console.log(1, payload)
  })
  emitter.on('test', (payload) => {
    console.log(2, payload)
  })

  emitter.on('update', () => {
    console.log(3)
  })

  setTimeout(() => {
    emitter.emit('test', 'this is event message')
  }, 2000)

</script>